<!--
 * @Descripttion: 我的机型
 * @version: 
 * @Author:Hui
 * @Date: 2023-10-07 15:05:24
 * @LastEditTime: 2024-08-06 09:06:40
 * @LastEditors: sueRimn
-->

<template>
  <view class="container phone-warp">
    <view class="header d-flex justify-content-between align-items-center">
      <view class="title">
        {{
          phoneTitle
        }}</view>
      <view class="text" @click="goPage('category')">
        更换
      </view>
    </view>

    <view class="phone d-flex align-items-center justify-content-between">
      <view class="image d-flex align-items-center justify-content-center">
        <view class="tip">{{showProductInfo.fromText}}</view>
        <common-image
          :src="showProductInfo.productImage ? showProductInfo.productImage + '?x-oss-process=image/resize,m_fill,w_120' : ''"
          :styles="'width: 120rpx; height: 120rpx; display: block;mix-blend-mode: multiply;'" />
      </view>
      <view class="info d-flex flex-column   flex-fill">
        <view class="name">{{ showProductInfo.productName }}</view>
        <view class="tips d-flex">
          <text class="text" v-for="item in tips" :key="item">{{ item }}</text>
        </view>

        <view class="price d-flex justify-content-between">
          <view class="d-flex align-items-end">
            <text class="yuan">￥</text>
            <text class="value">{{ showProductInfo.evaluatePrice }}</text>
          </view>
          <button class="btn" @click="goPage('product', { id: showProductInfo.productId })">立即换钱</button>
        </view>
      </view>
    </view>
    <!-- #ifdef MP-ALIPAY -->
    <!-- <view class="desc">回收得 回收款/公益证书/隐私安全凭证/蚂蚁森林能量</view> -->
    <!-- #endif -->
  </view>
</template>


<script>
export default {
  props: {
    showProductInfo: { type: Object, default: {} }
  },
  data: () => ({
    tips: ["顺丰回收", "泄密必赔", "全国上门"]
  }),
  computed: {
    phoneTitle() {
      let title = '热门回收'
      if (this.showProductInfo.fromType === 'user') {
        title = '我的机型'
      } else if (this.showProductInfo.fromType === 'last') {
        title = '历史估价'
      }
      return title
    }
  }
}
</script>

<style lang="scss" scoped>
.phone-warp {
  padding: 32rpx;
  background-color: #fff;
  border-radius: 24rpx;
  margin: 32rpx;
  position: relative;
  .desc {
    background: #FFF5EC;
    border-radius: 16rpx;
    font-weight: 400;
    color: #FF7900;
    font-size: 22rpx;
    height: 64rpx;
    line-height: 64rpx;
    text-align: center;
    margin: 32rpx 0 0 0;
    font-family: PingFangSC-Regular, PingFang SC;
  }
}

.header {
  .title {
    font-size: var(--hui-font-size-32);
    font-weight: bold;
  }

  .text {
    font-size: var(--hui-font-size-26);
    color: var(--hui-color-subtitle);
  }
}

.phone {
  padding: 35rpx 0rpx 0rpx 0rpx;
  width: 100%;

  .image {
    background: #F7F7F7;
    border-radius: 16rpx;
    width: 150rpx;
    height: 150rpx;
    position: relative;
    .tip{
      position: absolute;
      left: 0;
      top: 0;
      background-color: var(--hui-color-primary);
      color: #fff;
      z-index: 1;
      font-size: var(--hui-font-size-22);
      border-radius: 16rpx 8rpx 8rpx 8rpx;
      width: 60rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
    }
  }

  .info {
    padding: 0 0 0 24rpx;

    .name {
      font-size: var(--hui-font-size-30);
      color: var(--hui-color-title);
      line-height: 1;
      font-weight: bold;
      margin-top: 10rpx;
      width: 450rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

    }

    .tips {
      margin: 15rpx 0 0 0;

      .text {
        width: 120rpx;
        height: 40rpx;
        line-height: 40rpx;
        display: block;
        border-radius: 24px;
        font-size: var(--hui-font-size-22);
        color: var(--hui-color-primary);
        background-color: var(--hui-bg-button);
        margin-right: 12rpx;
        text-align: center;
      }
    }

    .price {
      font-size: 48rpx;
      color: #1F1F1F;
      line-height: 1;
      padding: 10rpx 0 0 0;
      color: #FF2323;
      font-weight: 600;

      .yuan {
        font-size: 20rpx;
        margin: 0 0 5rpx 0rpx;
      }

      .value {
        font-size: 40rpx;
      }
    }
  }

  .btn {
    width: 152rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 50rpx;
    font-size: var(--hui-font-size-26);
    color: #FFFFFF;
    font-weight: bold;
    background: var(--hui-color-primary);
  }


}
</style>